<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>MySQL安装脚本生成器-ad</title>
  <script src="./js/tailwind.js"></script>
  <script src="./js/jszip.min.js"></script>
  <style>
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
    }
    
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
      50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.6); }
    }
    
    .animate-fade-in-up {
      animation: fadeInUp 0.6s ease-out;
    }
    
    .animate-float {
      animation: float 3s ease-in-out infinite;
    }
    
    .animate-pulse-glow {
      animation: pulse-glow 2s ease-in-out infinite;
    }
    
    .gradient-text {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .glass-effect {
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.18);
    }
  </style>
</head>
<body class="bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 min-h-screen flex flex-col items-center py-10 relative overflow-x-hidden">
  <!-- 装饰性背景元素 -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute -top-40 -right-40 w-80 h-80 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-float"></div>
    <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-float" style="animation-delay: -1.5s;"></div>
    <div class="absolute top-40 left-40 w-60 h-60 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-float" style="animation-delay: -3s;"></div>
  </div>

  <!-- 主标题区域 -->
  <div class="relative z-10 text-center mb-10 animate-fade-in-up">
    <div class="flex items-center justify-center gap-3 mb-4">
      <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center animate-pulse-glow">
        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
        </svg>
      </div>
      <h1 class="text-5xl font-extrabold gradient-text drop-shadow-lg tracking-tight">MySQL安装脚本生成器</h1>
    </div>
    <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
      一键生成 MySQL 安装配置文件和批处理脚本，让数据库安装变得简单高效
    </p>
    <div class="flex items-center justify-center gap-2 mt-4 text-sm text-gray-500">
      <span>✨ 开源项目</span>
      <span>•</span>
      <span>🚀 静态部署</span>
      <span>•</span>
      <span>💡 简单易用</span>
    </div>
  </div>

  <!-- 表单区域 -->
  <form id="mysqlForm" class="relative z-10 glass-effect shadow-2xl rounded-3xl p-10 flex flex-col gap-6 w-full max-w-md mb-10 animate-fade-in-up" style="animation-delay: 0.2s;">
    <div class="text-center mb-4">
      <h2 class="text-2xl font-bold text-gray-800 mb-2">配置参数</h2>
      <p class="text-gray-600">填写以下信息生成安装脚本</p>
    </div>
    
    <label class="flex flex-col gap-2 font-semibold text-gray-700 group">
      <div class="flex items-center gap-2">
        <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
        </svg>
        安装路径
      </div>
      <input name="path" value="D:\" required class="border-2 border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all duration-300 group-hover:border-blue-300" />
    </label>
    
    <label class="flex flex-col gap-2 font-semibold text-gray-700 group">
      <div class="flex items-center gap-2">
        <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
        </svg>
        MySQL 版本
      </div>
      <input name="version" value="mysql-8.0.39-winx64" required class="border-2 border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-400 focus:border-transparent transition-all duration-300 group-hover:border-green-300" />
    </label>
    
    <label class="flex flex-col gap-2 font-semibold text-gray-700 group">
      <div class="flex items-center gap-2">
        <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
        </svg>
        root 密码
      </div>
      <input name="password" value="123456" required class="border-2 border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-transparent transition-all duration-300 group-hover:border-red-300" />
    </label>
    
    <button type="submit" class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-bold rounded-xl py-4 mt-4 shadow-lg transition-all duration-300 transform hover:scale-105 hover:shadow-xl">
      <div class="flex items-center justify-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
        </svg>
        生成脚本
      </div>
    </button>
  </form>

  <!-- 操作按钮区域 -->
  <div id="actions-area" class="relative z-10 w-full max-w-4xl flex flex-col gap-6 hidden animate-fade-in-up" style="animation-delay: 0.4s;">
    <div class="text-center mb-4">
      <h3 class="text-2xl font-bold text-gray-800 mb-2">生成完成！</h3>
      <p class="text-gray-600">选择您需要的操作</p>
    </div>
    
    <div class="flex gap-4 justify-center flex-wrap">
      <button id="show-ini-modal" class="bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white rounded-xl px-6 py-4 font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 hover:shadow-xl flex items-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
        </svg>
        查看 my.ini 配置
      </button>
      
      <button id="show-cmd-modal" class="bg-gradient-to-r from-yellow-500 to-orange-600 hover:from-yellow-600 hover:to-orange-700 text-white rounded-xl px-6 py-4 font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 hover:shadow-xl flex items-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
        查看命令行脚本
      </button>
      
      <button id="download-ico" class="bg-gradient-to-r from-gray-600 to-gray-800 hover:from-gray-700 hover:to-gray-900 text-white rounded-xl px-6 py-4 font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 hover:shadow-xl flex items-center gap-2">
        <img src="./img/mysqlico.ico" alt="icon" class="w-5 h-5"> 下载图标
      </button>
      
      <button id="download-all" class="bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 text-white rounded-xl px-6 py-4 font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 hover:shadow-xl flex items-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5m0 0l5-5m-5 5V4"/>
        </svg>
        一键全部下载
      </button>
      
      <button id="download-zip" class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white rounded-xl px-6 py-4 font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 hover:shadow-xl flex items-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
        </svg>
        打包下载
      </button>
    </div>
  </div>

  <!-- my.ini Modal -->
  <div id="ini-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden backdrop-blur-sm">
    <div class="glass-effect rounded-3xl shadow-2xl p-8 w-full max-w-2xl relative animate-fade-in-up max-h-[90vh] overflow-y-auto">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
          <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
          </svg>
          my.ini 配置
        </h2>
        <button class="close-modal text-gray-400 hover:text-gray-600 transition-colors">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
      <textarea id="myini" rows="15" readonly class="w-full border-2 border-gray-200 rounded-xl p-4 font-mono bg-gray-50 resize-none mb-6 focus:outline-none focus:ring-2 focus:ring-green-400 focus:border-transparent"></textarea>
      <div class="flex justify-end gap-3">
        <button id="download-ini" class="bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white rounded-xl px-6 py-3 font-medium transition-all duration-300 transform hover:scale-105 flex items-center gap-2">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5m0 0l5-5m-5 5V4"/>
          </svg>
          下载 my.ini
        </button>
        <button class="close-modal bg-gray-300 hover:bg-gray-400 text-gray-700 rounded-xl px-6 py-3 font-medium transition-all duration-300">关闭</button>
      </div>
    </div>
  </div>

  <!-- CMD Modal -->
  <div id="cmd-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden backdrop-blur-sm">
    <div class="glass-effect rounded-3xl shadow-2xl p-8 w-full max-w-2xl relative animate-fade-in-up max-h-[90vh] overflow-y-auto">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
          <svg class="w-6 h-6 text-yellow-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
          </svg>
          命令行脚本
        </h2>
        <button class="close-modal text-gray-400 hover:text-gray-600 transition-colors">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
      <textarea id="cmd" rows="20" readonly class="w-full border-2 border-gray-200 rounded-xl p-4 font-mono bg-gray-50 resize-none mb-6 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent"></textarea>
      <div class="flex justify-end gap-3">
        <button id="download-install-shortcut" class="bg-gradient-to-r from-yellow-500 to-orange-600 hover:from-yellow-600 hover:to-orange-700 text-white rounded-xl px-6 py-3 font-medium transition-all duration-300 transform hover:scale-105 flex items-center gap-2">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5m0 0l5-5m-5 5V4"/>
          </svg>
          下载一键安装脚本
        </button>
        <button class="close-modal bg-gray-300 hover:bg-gray-400 text-gray-700 rounded-xl px-6 py-3 font-medium transition-all duration-300">关闭</button>
      </div>
    </div>
  </div>
  <script type="module">
    import { myiniTemplates, renderMyIni } from './templates/myini_templates.js';
    import { generateInstallAndShortcutBat } from './templates/shortcut_bat.js';

    function getVersionType(version) {
      const m3 = version.match(/(\d+\.\d+\.\d+)/);
      if (m3 && myiniTemplates[m3[1]]) return m3[1];
      const m2 = version.match(/(\d+\.\d+)/);
      if (m2 && myiniTemplates[m2[1]]) return m2[1];
      return '8.0';
    }

    document.getElementById('mysqlForm').onsubmit = function(e) {
      e.preventDefault();
      
      // 每次提交时都先隐藏操作按钮区域
      document.getElementById('actions-area').classList.add('hidden');
      
      const f = Object.fromEntries(new FormData(this));
      
      // 验证输入格式
      const versionPattern = /^mysql-\d+\.\d+\.\d+-winx64$/;
      if (!versionPattern.test(f.version)) {
        alert('MySQL 版本格式不正确！\n正确格式：mysql-X.X.XX-winx64\n例如：mysql-8.0.39-winx64');
        return;
      }
      
      // 验证安装路径
      if (!/^[A-Za-z]:\\/.test(f.path)) {
        alert('安装路径格式不正确！\n请输入如 D:\\ 或 E:\\test\\ 这样的路径');
        return;
      }
      
      // 验证密码
      if (!f.password || f.password.trim() === '') {
        alert('请输入 root 密码！');
        return;
      }
      
      let basePath = f.path;
      if (!basePath.endsWith('\\')) basePath += '\\';
      const basedir = `${basePath}${f.version}`;
      const datadir = `${basedir}\\Data`;
      const versionType = getVersionType(f.version);
      
      // 检查 my.ini 模板
      if (!myiniTemplates[versionType]) {
        alert('未匹配到合适的 my.ini 配置模板！\n请检查 MySQL 版本格式是否正确。');
        return;
      }
      
      // 生成 my.ini 配置
      let config = myiniTemplates[versionType]
        .replace('{basedir}', basedir)
        .replace('{datadir}', datadir);
      let myini = renderMyIni(versionType, config);
      document.getElementById('myini').value = myini;
      
      // 生成 bat 脚本
      const bat = generateInstallAndShortcutBat(f.password, f.version);
      if (!bat) {
        alert('未匹配到合适的安装脚本模板！\n请检查 MySQL 版本格式是否正确。');
        return;
      }
      document.getElementById('cmd').value = bat;
      
      // 只有在所有验证和生成都成功后才显示操作按钮区域
      document.getElementById('actions-area').classList.remove('hidden');
    };

    // Modal logic
    function showModal(id) {
      document.getElementById(id).classList.remove('hidden');
    }
    function closeModal(e) {
      e.target.closest('.fixed').classList.add('hidden');
    }
    document.getElementById('show-ini-modal').onclick = () => showModal('ini-modal');
    document.getElementById('show-cmd-modal').onclick = () => showModal('cmd-modal');
    document.querySelectorAll('.close-modal').forEach(btn => btn.onclick = closeModal);

    document.getElementById('download-ini').onclick = () => {
      const blob = new Blob([document.getElementById('myini').value], {type: 'text/plain'});
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = 'my.ini';
      a.click();
    };
    document.getElementById('download-install-shortcut').onclick = () => {
      const password = document.querySelector('[name="password"]').value || '123456';
      const version = document.querySelector('[name="version"]').value || '8.0';
      const bat = generateInstallAndShortcutBat(password, version);
      const blob = new Blob(['\uFEFF', bat], {type: 'text/plain'});
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = 'mysql_install.bat';
      a.click();
    };
    document.getElementById('download-ico').onclick = () => {
      const a = document.createElement('a');
      a.href = './img/mysqlico.ico';
      a.download = 'mysqlico.ico';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    };
    document.getElementById('download-all').onclick = () => {
      // 下载 my.ini
      const iniBlob = new Blob([document.getElementById('myini').value], {type: 'text/plain'});
      const iniA = document.createElement('a');
      iniA.href = URL.createObjectURL(iniBlob);
      iniA.download = 'my.ini';
      iniA.click();
      // 下载 bat
      const password = document.querySelector('[name="password"]').value || '123456';
      const version = document.querySelector('[name="version"]').value || '8.0';
      const bat = generateInstallAndShortcutBat(password, version);
      const batBlob = new Blob(['\uFEFF', bat], {type: 'text/plain'});
      const batA = document.createElement('a');
      batA.href = URL.createObjectURL(batBlob);
      batA.download = 'mysql_install.bat';
      batA.click();
      // 下载 ico
      const icoA = document.createElement('a');
      icoA.href = './img/mysqlico.ico';
      icoA.download = 'mysqlico.ico';
      document.body.appendChild(icoA);
      icoA.click();
      document.body.removeChild(icoA);
    };
    
    document.getElementById('download-zip').onclick = async () => {
      const zip = new JSZip();
      
      // 添加 my.ini 文件（无 BOM）
      const myiniContent = document.getElementById('myini').value;
      zip.file('my.ini', myiniContent);
      
      // 添加 bat 文件（有 BOM）
      const password = document.querySelector('[name="password"]').value || '123456';
      const version = document.querySelector('[name="version"]').value || '8.0';
      const bat = generateInstallAndShortcutBat(password, version);
      zip.file('mysql_install.bat', '\uFEFF' + bat);
      
      // 添加 ico 文件
      try {
        const icoResponse = await fetch('./img/mysqlico.ico');
        const icoBlob = await icoResponse.blob();
        zip.file('mysqlico.ico', icoBlob);
      } catch (error) {
        console.warn('无法加载图标文件:', error);
      }
      
      // 生成并下载 zip 文件
      const zipBlob = await zip.generateAsync({type: 'blob'});
      const a = document.createElement('a');
      a.href = URL.createObjectURL(zipBlob);
      a.download = 'mysql_install_package.zip';
      a.click();
    };
  </script>
  <!-- 使用效果 GIF 展示 -->
  <div class="w-full flex flex-col items-center my-8">
    <h4 class="text-lg font-semibold text-gray-800 mb-4">使用效果演示</h4>
    <img src="img/bat.gif" alt="使用效果演示" class="rounded shadow-lg max-w-full h-auto" style="border:1px solid #eee;" />
  </div>
  <!-- 友情链接区域 -->
  <div class="w-full max-w-6xl mt-8 mb-8">
    <div class="glass-effect rounded-3xl shadow-2xl p-6">
      <div class="text-center mb-4">
        <h4 class="text-lg font-semibold text-gray-800 mb-2 flex items-center justify-center gap-2">
          <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
          </svg>
          友情链接
        </h4>
        <p class="text-sm text-gray-600">旗下站点</p>
      </div>
      
      <div class="flex flex-wrap justify-center gap-4">
        <a href="https://cloud.aiheadn.cn/" target="_blank" class="inline-flex items-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-4 py-2 rounded-lg transition transform hover:scale-105 shadow-lg">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
          </svg>
          a.d 云盘
        </a>
        
        <a href="https://www.aiheadn.cn/" target="_blank" class="inline-flex items-center gap-2 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white px-4 py-2 rounded-lg transition transform hover:scale-105 shadow-lg">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
          </svg>
          a.d 个人主页
        </a>
        
        <a href="https://blog.aiheadn.cn/archives/797b159.html" target="_blank" class="inline-flex items-center gap-2 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-4 py-2 rounded-lg transition transform hover:scale-105 shadow-lg">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
          </svg>
          a.d 技术博客
        </a>
      </div>
    </div>
  </div>
  <!-- 开源信息区域 -->
  <footer class="w-full max-w-6xl mt-16 mb-8">
    <div class="glass-effect rounded-3xl shadow-2xl p-8">
      <!-- 项目标题和描述 -->
      <div class="text-center mb-8">
        <div class="flex items-center justify-center gap-3 mb-4">
          <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
            </svg>
          </div>
          <h3 class="text-3xl font-bold text-gray-800">MySQL Script Generator</h3>
        </div>
        <p class="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed">
          一个简单易用的 MySQL 安装脚本生成器，支持多种 MySQL 版本，一键生成配置文件和一键安装脚本，让数据库部署变得简单高效。
        </p>
      </div>

      <!-- 项目特性 -->
      <div class="grid md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white/50 rounded-xl p-6 border border-gray-100">
          <div class="flex items-center gap-3 mb-3">
            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
              </svg>
            </div>
            <h4 class="font-semibold text-gray-800">快速部署</h4>
          </div>
          <p class="text-gray-600 text-sm">支持 MySQL 5.5-8.0 版本，一键生成安装脚本，无需手动配置。</p>
        </div>
        
        <div class="bg-white/50 rounded-xl p-6 border border-gray-100">
          <div class="flex items-center gap-3 mb-3">
            <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
            <h4 class="font-semibold text-gray-800">简单易用</h4>
          </div>
          <p class="text-gray-600 text-sm">纯前端实现，无需安装，打开即用，支持在线预览和下载。</p>
        </div>
        
        <div class="bg-white/50 rounded-xl p-6 border border-gray-100">
          <div class="flex items-center gap-3 mb-3">
            <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
              </svg>
            </div>
            <h4 class="font-semibold text-gray-800">安全可靠</h4>
          </div>
          <p class="text-gray-600 text-sm">本地生成，数据不上传，保护您的隐私和配置信息。</p>
        </div>
      </div>

      <!-- 项目信息 -->
      <div class="grid md:grid-cols-2 gap-8 mb-8">
        <div class="space-y-4">
          <h4 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
            <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
            </svg>
            项目信息
          </h4>
          
          <div class="space-y-3">
            <div class="flex items-center gap-3">
              <span class="text-sm font-medium text-gray-600 w-20">仓库地址:</span>
              <a href="https://github.com/2585570153/mysql_script_generatorl" target="_blank" class="text-blue-600 hover:text-blue-800 transition text-sm">
                github.com/2585570153/mysql_script_generatorl
              </a>
            </div>
            
            <div class="flex items-center gap-3">
              <span class="text-sm font-medium text-gray-600 w-20">许可证:</span>
              <span class="text-sm text-gray-600">MIT License</span>
            </div>
            
            <div class="flex items-center gap-3">
              <span class="text-sm font-medium text-gray-600 w-20">支持版本:</span>
              <span class="text-sm text-gray-600">MySQL 5.5, 5.6, 5.7, 8.0</span>
            </div>
            
            <div class="flex items-center gap-3">
              <span class="text-sm font-medium text-gray-600 w-20">技术栈:</span>
              <span class="text-sm text-gray-600">HTML, CSS, JavaScript</span>
            </div>
          </div>
        </div>
        
        <div class="space-y-4">
          <h4 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
            <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
            </svg>
            作者信息
          </h4>
          
          <div class="space-y-3">
            <div class="flex items-center gap-3">
              <span class="text-sm font-medium text-gray-600 w-20">作者:</span>
              <span class="text-sm text-gray-600">a.d</span>
            </div>
            
            <div class="flex items-center gap-3">
              <span class="text-sm font-medium text-gray-600 w-20">个人主页:</span>
              <a href="https://www.aiheadn.cn/" target="_blank" class="text-blue-600 hover:text-blue-800 transition text-sm">
                aiheadn.cn
              </a>
            </div>
            
            <div class="flex items-center gap-3">
              <span class="text-sm font-medium text-gray-600 w-20">简介:</span>
              <span class="text-sm text-gray-600">Web 程序员，永远年轻，不断挑战</span>
            </div>
            
            <div class="flex items-center gap-3">
              <span class="text-sm font-medium text-gray-600 w-20">标签:</span>
              <div class="flex gap-1">
                <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">Web开发</span>
                <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">开源</span>
                <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">工具</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 快速开始 -->
      <div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-6 mb-8">
        <h4 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
          <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
          </svg>
          快速开始
        </h4>
        <div class="grid md:grid-cols-3 gap-4 text-sm">
          <div class="flex items-center gap-2">
            <div class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</div>
            <span class="text-gray-700">填写配置参数</span>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</div>
            <span class="text-gray-700">生成安装脚本</span>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</div>
            <span class="text-gray-700">下载放置到mysql对应文件夹根目录</span>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</div>
            <span class="text-gray-700">管理员方式运行bat脚本</span>
          </div>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="border-t border-gray-200 pt-6">
        <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
          <div class="flex items-center gap-4 flex-wrap">
            <a href="https://github.com/2585570153/mysql_script_generatorl" target="_blank" class="inline-flex items-center gap-2 bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded-lg transition transform hover:scale-105">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
              </svg>
              查看源码
            </a>
            <a href="https://github.com/2585570153/mysql_script_generatorl/issues" target="_blank" class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition transform hover:scale-105">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
              报告问题
            </a>
            <a href="https://www.aiheadn.cn/" target="_blank" class="inline-flex items-center gap-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg transition transform hover:scale-105">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
              </svg>
              作者主页
            </a>
          </div>
          <div class="text-sm text-gray-500 text-center sm:text-right">
            <div>© 2025 MySQL Script Generator</div>
            <div class="flex items-center justify-center sm:justify-end gap-1 mt-1">
              <span>Made with</span>
              <svg class="w-4 h-4 text-red-500" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
              </svg>
              <span>for the community</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</body>
</html> 